<section class="booked-box">
  <section class="booked" *ngIf="booked" >

    <div>
      <p class="cal-booked-timeline">
        {{ booked.beginTime |date:'HH:mm' }} ~
        {{ booked.endTime |date:'HH:mm' }}
        {{ booked.schoolDayList }}
      </p>
    </div>

    <div class="cal-booked-table-wrap flex flex-row ">
      <div class="booked-avatar-wrap flex-disable-shrink">
        <img *ngIf="booked.lesson"
             [src]="booked.lesson.coverUrl"
             class="booked-avatar" />
      </div>
      <table>
        <tr>
          <th><label i18n="ClassSize">Class Size</label>：</th>
          <td class="text-ellipsis" style="width: 4%">
            {{booked.extra.classMaxSize||'1'}} </td>
          <th><label i18n="ClassMode" style="width: 14%;">Class Mode</label>：</th>
          <td class="text-ellipsis" style="width: 14%">
            {{booked.classMode.text}}</td>
          <th><label i18n="Course">Course</label>：</th>
          <td class="text-ellipsis" style="width: 25%"
              [title]="booked.rct && booked.rct.name">
            {{booked.rct && booked.rct.name}}</td>
        </tr>
        <tr>
          <th><label i18n="CourseSize">Attendance</label>：</th>
          <td class="text-ellipsis" style="width: 4%">
            {{booked.extra.studentSize||'0'}}</td>
          <th><label i18n="CourseLevel">Level</label>：</th>
          <td class="text-ellipsis"
              [title]="booked.level && booked.level.name">
            {{booked.level && booked.level.name}}</td>
          <th><label i18n="CourseType">Type</label>：</th>
          <td class="text-ellipsis"
              [title]="booked.ct && booked.ct.name">
            {{booked.ct && booked.ct.name}}</td>
        </tr>
        <tr>
          <th><label i18n="Materials">Materials</label>：</th>
          <td colspan="4" class="text-ellipsis"
              [title]="booked.lesson && booked.lesson.name">
            {{booked.material && booked.material.name}}
            / {{booked.unit && booked.unit.name}}
            / {{booked.lesson && booked.lesson.name}}
          </td>
          <td class="booked-result">
          <span class="tips">
            {{getStatus()}}
          </span>
          </td>
        </tr>
      </table>
    </div>

    <div class="booked-viewer" *ngIf="isCompleted()">

      <div class="barline" >
        <span i18n="ChatRecord">Chat Record</span>
        <div class="bar" [class.active]="isOpen" (click)="openBox()"></div>
      </div>

      <div class="content-box viewer" [class.active]="isOpen" >
        <article class="message-viewport" *ngIf="isOpen">
          <div class="message-viewer">
            <app-messagebox [booked]="booked"></app-messagebox>
          </div>
        </article>
      </div>

    </div>

  </section>

</section>
